<template>
  <div>
    <a-tooltip overlayClassName="banner-tooltip" :overlayStyle="styleObj" color="#fff" :placement="placement">
      <template #title>
        <div class="ad-box">
          <img :style="styleObj1" :src="imgSrc" alt="" />
        </div>
      </template>
      <a class="banner-tooltip-text">
        <i class="iconfont icon-guanggao mr-[5px]"></i><span>{{ text }}</span>
      </a>
    </a-tooltip>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
const prop = withDefaults(
  defineProps<{
    placement: string
    imgSrc?: string
    width: number
    height: number
    text: string
  }>(),
  {
    placement: 'rightTop',
    imgSrc: '',
    width: 212,
    height: 350
  }
)
console.log('width, height: ', prop.width, prop.height)
const styleObj = computed(() => {
  return {
    width: prop.width + 24 + 'px',
    minHeight: prop.height + 'px',
    borderRadius: '3px',
    maxWidth: 'fit-content'
  }
})
const styleObj1 = computed(() => {
  return {
    width: prop.width + 'px',
    height: prop.height + 'px',
    borderRadius: '3px'
  }
})
</script>

<style lang="less">
.banner-tooltip {
  &-text {
    color: #0083ff;
    span {
      // margin-left: 5px;
    }
  }
}
</style>
